<!--
  公司：xxx有限公司
  版权：xxx2020
  描述：基于primeNG的Table组件样式表
  作者：oyjl
  时间：2020-03-05 12:25:33
 -->

<div class="tb-main">
  <p-messages [style]="{height: '30px'}" [(value)]="rTableService.msgs"></p-messages>
  <p-confirmDialog [key]="'tbConfirm'" [header]="rTableService.confirmConfig.header"
    [visible]='rTableService.confirmVisible' icon="rTableService.confirmConfig.icon"
    [acceptLabel]="'确定' | rLang:'button-ok'" [closable]="rTableService.confirmClosable"
    [rejectLabel]="'取消' | rLang:'button-cancel'">
  </p-confirmDialog>
  <p-breadcrumb *ngIf="rTableService.breadcrumbPath.length > 0" [model]="rTableService.breadcrumbPath"
    [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
  <!-- 表格顶部数据 -->
  <div class="tb-top">
    <p-table [value]="rTableService.stringToBoolean(rTable.prop.value || [], this.rTable.prop.columns)"
      [columns]="rTable.prop.columns" [customSort]="rTable.prop.customSort"
      (sortFunction)="rTable.prop.sortFunction($event)" [selectionMode]="rTable.prop.selectionMode"
      [(selection)]="rTable.prop.selection" [lazy]="rTable.prop.lazy" [scrollable]="rTable.prop.scrollable"
      [scrollHeight]="rTable.prop.scrollHeight" [resizableColumns]="rTable.prop.resizableColumns"
      [loading]="rTable.prop.loading" [autoLayout]="rTable.prop.autoLayout"
      (onRowSelect)="rTable.event.onRowSelect($event)" (onRowUnselect)="rTable.event.onRowUnselect($event)"
      (onSort)="rTable.event.onSort($event)">
      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col *ngFor="let col of columns" [style.width]="col.width">
        </colgroup>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr>
          <ng-container *ngFor="let col of columns">
            <!-- 表格头部组装，根据表格配置按需加载 -->
            <th [ngStyle]="{'width': col.width}" [pSortableColumn]="col.isSort?col.field:''"
              [ngStyle]="{'width': (col.type === 'rd' || col.type === 'ck') ? '48px' : 'auto'}" pResizableColumn>
              <ng-container *ngIf="col.isSort">
                <p-sortIcon [field]="col.field"></p-sortIcon>
              </ng-container>
              <ng-container *ngIf="col.type === 'ck'">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </ng-container>
              <ng-container *ngIf="col.type !== 'ck' && col.type !== 'rd'">
                {{col.header | rLang:col.langKey}}
              </ng-container>
            </th>
          </ng-container>
        </tr>
        <tr *ngIf="!rTableService.animationShow && rTable.prop.value.length <= 0">
          <td [attr.colspan]="columns.length" class="tb-full-data">
            <img
              src=""
              alt="图片加载失败"><br>
            <strong>{{'暂无数据' | rLang:'label-no-data'}}</strong>
          </td>
        </tr>
        <tr *ngIf="rTableService.animationShow">
          <td [attr.colspan]="columns.length" class="tb-wait-animate">
            <p-progressSpinner></p-progressSpinner><br>
            <span>{{'数据加载中...' | rLang:'label-data-loading'}}</span>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-index="rowIndex" let-columns="columns">
        <tr [pSelectableRow]="rowData">
          <!-- 表格主体组装，根据表格配置按需加载 -->
          <ng-container *ngFor="let col of columns">
            <td [ngStyle]="{'width': (col.type === 'rd' || col.type === 'ck') ? '48px' : col.width}"
              [ngClass]="tbFieldClassHandle(rowData, col) ? col.fieldClass && col.fieldClass.class : null">
              <ng-container *ngIf="col.type === 'index'">{{index+rTable.paginator.first+1}}
              </ng-container>
              <ng-container *ngIf="col.type === 'rd'">
                <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
              </ng-container>
              <ng-container *ngIf="col.type === 'ck'">
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
              </ng-container>
              <ng-container *ngIf="col.type === 'sw'">
                <p-inputSwitch [oyRButtonAuthority]="col.buttonAuthority" [(ngModel)]="rowData[col.field]"
                  (onChange)="col.fieldOpEvt($event, rowData, col)">
                </p-inputSwitch>
              </ng-container>
              <ng-container *ngIf="col.type === 'date'">
                <span>{{rowData[col.field] | rMultipleSwitch:rowData:col.field | date: col.format}}</span>
              </ng-container>
              <!-- 单个字段拼接自定义html片段，优先使用行数据中的html片段，需要使用者在initEvt里面加-htmlString后缀字段拼接html片段，如果没有行数据
              html片段，则使用行配置文件html片段，如果都不存在则不拼接，区别在于行数据html片段可以根据数据情况动态展示不一致的html片段 -->
              <ng-container *ngIf="col.type === 'text'">
                <p [ngClass]="{'tb-operator-element': col.fieldOpEvt}"
                  [ngStyle]="(rowData[col.fieldStyle] && rowData[col.fieldStyle][col.field + 'Style']) || col.style"
                  (click)="col.fieldOpEvt && col.fieldOpEvt($event, rowData, col)">
                  <span *ngIf="rowData[col.field + '-htmlString'] || col.htmlString"
                    [innerHTML]="rowData[col.field + '-htmlString'] || col.htmlString|rTrustHtml"></span>
                  {{rowData[col.field] | rMultipleSwitch:rowData:col.field}}
                </p>
              </ng-container>
              <!-- 单个字段拼接自定义html片段，优先使用行数据中的html片段，需要使用者在initEvt里面加-htmlString后缀字段拼接html片段，如果没有行数据
              html片段，则使用行配置文件html片段，如果都不存在则不拼接，区别在于行数据html片段可以根据数据情况动态展示不一致的html片段 -->
              <ng-container *ngIf="col.type === 'dict'">
                <p [ngClass]="{'tb-operator-element': col.fieldOpEvt}"
                  (click)="col.fieldOpEvt && col.fieldOpEvt($event, rowData, col)">
                  <span *ngIf="rowData[col.field + '-htmlString'] || col.htmlString"
                    [innerHTML]="rowData[col.field + '-htmlString'] || col.htmlString|rTrustHtml"></span>
                  {{rowData[col.field] | rMultipleSwitch:rowData:col.field | rdictSwitch:col.dictType}}
                </p>
              </ng-container>
              <!-- 单个字段拼接自定义html片段，优先使用行数据中的html片段，需要使用者在initEvt里面加-htmlString后缀字段拼接html片段，如果没有行数据
              html片段，则使用行配置文件html片段，如果都不存在则不拼接，区别在于行数据html片段可以根据数据情况动态展示不一致的html片段 -->
              <ng-container *ngIf="col.type === 'htmlString'">
                <p [innerHTML]="rowData[col.field + '-htmlString'] || col.htmlString|rTrustHtml"></p>
              </ng-container>
              <span class="tb-operator-content" *ngIf="col.type === 'operator'">
                <!-- 操作设置，可以自定义样式，点击事件,根据不同的行数据展示不同的操作 -->
                <ng-container *ngFor="let op of (rowData['operator'] || col['operator'])">
                  <ng-container *ngIf="op.type !== 'splitButton'; else elseTemplate">
                    <span *ngIf="!rowData[op.hiddenField]" class="tb-operator-element {{op.inlineClass}}"
                      (click)="op.clickEvt && op.clickEvt(rowData)" [oyRButtonAuthority]="op.buttonAuthority"
                      [oyLangKey]="op.langKey">
                      {{op.text}}</span>
                  </ng-container>
                  <ng-template #elseTemplate>
                    <p-splitButton label="{{op.text}}" [model]="op.options" styleClass="p-button-sm mr-2 mb-2"
                      (onDropdownClick)="addRowData(rowData, op.options)" appendTo="body">
                    </p-splitButton>
                  </ng-template>
                </ng-container>
              </span>
            </td>
          </ng-container>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div #pagingBottomPlace *ngIf="rTable.prop.paginatorPosition === 'bottom'" class="paging-bottom-place"></div>
  <!-- 表格底部数据，主要是分页组件 -->
  <div *ngIf="rTable.prop.paginator"
    [ngClass]="{'tb-bottom': true, 'tb-paginator-both': rTable.prop.paginatorPosition === 'both','tb-paginator-bottom': rTable.prop.paginatorPosition === 'bottom'}">
    <p-paginator [rows]="rTable.paginator.pageSize" [first]="rTable.paginator.first"
      [totalRecords]="rTable.paginator.total" [pageLinkSize]="rTable.paginator.pageLinkSize"
      [rowsPerPageOptions]="rTable.paginator.rowsPerPageOptions"
      (onPageChange)="onPage($event);rTable.event.onPage($event)">
    </p-paginator>
    <div class="tb-page-total">
      <span>共{{rTable.paginator.total}}条记录&nbsp;&nbsp;</span>
      <span>第{{rTable.paginator.pageNo > rTable.paginator.pageCount?1:rTable.paginator.pageNo
        }}/{{rTable.paginator.pageCount}}页</span>
      <span
        *ngIf="rTable.prop.selection && rTable.prop.selection.length > 0">&nbsp;&nbsp;选中{{rTable.prop.selection.length}}条</span>
    </div>
    <form class="tb-page-change" (ngSubmit)="onPageForm({page: page.value - 1});rTable.event.onPage($event)">
      <span>&nbsp;&nbsp;&nbsp;跳至&nbsp;<input #page name="page" type="text" class="tb-page-input" autocomplete="off"
          [oyRInputPlusNum]="rTable.paginator.pageCount">&nbsp;页</span>
    </form>
  </div>
</div>
